<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.事件传参</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>学校名称：{{school.name}}</h2>
			<h2>学校地址：{{school.address}}</h2>
			<button @click="show1">按钮1（不传参）</button> <br><br>
			<button @click="show2(666)">按钮2（传一个参数）</button> <br><br>
			<button @click="show3(666,777,888)">按钮3（传多个参数）</button> <br><br>
			<button @click="show4(666,$event,777,888)">按钮4（传参数+事件对象）</button> <br><br>
			<button @click="show5(school.name)">按钮5（传递data中的属性）</button> <br><br>

			<!-- 下面这两行大傻帽才会写 -->
			<!-- <button @click="test($event)">测试</button> -->
			<!-- <button @click="test()">测试</button> -->

		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					school:{
						name:'尚硅谷',
						address:'宏福科技园',
					}
				},
				methods:{
					show1(e){
						alert(e)
					},
					show2(number){
						alert(number)
					},
					show3(a,b,c){
						alert(`${a}-${b}-${c}`)
					},
					show4(a,e,b,c){
						alert(`${a}-${b}-${c}`)
						console.log(e)
					},
					show5(value){
						console.log(value)
					}
				}
			})

		</script>
	</body>
</html>